<template>
  <div class="layout">
    <!-- 顶栏信息 -->
    <div class="topBox">
      <!-- 电量 -->
      <div class="insideBox" style="background:#1ca3ff">
        <div class="insideBox2">
          <span class="insideImg">
            <img src="../assets/home_images/electric.png"
              alt="电量"
              style="width:70px"
            >
          </span>
        </div>
        <div class="insideBox2">
          <span class="insideText">
            总共电表台数(台):
          </span>
          <span v-if="topData.getFlag == false">
            获取数据中
          </span>
          <span v-else class="insideNumber">
            {{ topData.electricNumber }}
          </span>
        </div>
        <div class="insideBox2">
          <span class="insideText">
            共计电量(度):
          </span>
          <span v-if="topData.getFlag == false">
            获取数据中
          </span>
          <span v-else class="insideNumber">
            {{ topData.electricityNumber }}
          </span>
        </div>
      </div>
      <!-- 电费 -->
      <div class="insideBox" style="background:#f84d77">
        <div class="insideBox2">
          <span class="insideImg">
            <img src="../assets/home_images/RMB.png" alt="￥" style="width:70px">
          </span>
        </div>
        <div class="insideBox2">
          <span class="insideText">
            共计电费(元):
          </span>
          <span v-if="topData.getFlag == false">
            获取数据中
          </span>
          <span v-else class="insideNumber">
            {{ topData.electricityAllMoney }}
          </span>
        </div>
      </div>
      <!-- 水量 -->
      <!-- <div class="insideBox" style="background:#f8b753">
        <div class="insideBox2">
          <span class="insideImg">
            <img src="../assets/home_images/water.png" alt="电量" style="width:70px">
          </span>
        </div>
        <div class="insideBox2">
          <span class="insideText">
            总共水表台数(台):
          </span>
          <span v-if="topData.getFlag == false">
            获取数据中
          </span>
          <span v-else class="insideNumber">
            {{ topData.meterNumber }}
          </span>
        </div>
        <div class="insideBox2">
          <span class="insideText">
            共计水量(升):
          </span>
          <span v-if="topData.getFlag == false">
            获取数据中
          </span>
          <span v-else class="insideNumber">
            {{ topData.waterNumber }}
          </span>
        </div>
      </div>
      水费 
      <div class="insideBox" style="background:#27d7c0">
        <div class="insideBox2">
          <span class="insideImg">
            <img src="../assets/home_images/RMB.png" alt="￥" style="width:70px">
          </span>
        </div>
        <div class="insideBox2">
          <span class="insideText">
            共计水费(元):
          </span>
          <span v-if="topData.getFlag == false">
            获取数据中
          </span>
          <span v-else class="insideNumber">
            {{ topData.waterAllMoney }}
          </span>
        </div>
      </div> -->
    </div>
    <!-- 曲线图 -->
    <div class="tableBox">
      <div class="insideBox" style="background:#ffffff">
        <div>
          <span>
            当天用电量分布
          </span>
        </div>
        <e-charts class="electricityChart"
          ref="electricityChart"
          :option="option"
        />
      </div>
      <!-- <div class="insideBox" style="background:#ffffff">
        <div>
          <span>
            当天用水量分布
          </span>
        </div>
        <e-charts class="waterChart"
          :option="optionWater"
          ref="waterChart"
        />
      </div> -->
    </div>
    <!-- 场景 -->
    <!-- <div class="roomsBox" v-for="item in itemsData" :key="item.id">
      <div class="room">
        <span class="roomName">
          {{ item.name }}
        </span>
      </div>
       家居 
      <div class="itemsBox">
        <div class="itemBox" v-for="item2 in item.equipments" :key="item2.id">
          <span class="itemImg">
            <img :src=item2.img
              alt="家居"
              style="width: 100px"
            >
          </span>
          <span class="itemName">
            {{ item2.name }}
          </span>
          <span class="itemData">
            {{ item2.value }}
          </span>
          <span class="itemData" v-if="item2.value2">
            {{ item2.value2 }}
          </span>
        </div>
      </div>
    </div> -->
    <!-- 场景 -->
    <div class="allDataBox">
        <el-card class="dataBox" v-for="item in itemsData" :key="item.id" shadow="always">
            <div class="scene">
              <span>
                {{ item.name }}
              </span>
            </div>
            <ul class="equipments">
              <li class="equipment" v-for="item2 in item.equipments" :key="item2.id">
                <div class="equipName">
                  <span>
                    {{ item2.name }}
                  </span>
                </div>
                <div class="equipValue">
                  <div>
                    <span>
                      {{ item2.value }}
                    </span>
                    <span style="color:green">
                      {{ item2.unit }}
                    </span>
                  </div>
                </div>
                <div class="switch">
                  <el-switch v-model="item2.disjunction"
                    :disabled="item2.disjunction==null"
                    :active-value=0
                    :inactive-value=1
                    @change="handleSwitchChange(item2)"
                  >
                  </el-switch>
                </div>
              </li>
            </ul>
        </el-card>
    </div>
  </div>
</template>

<script>
import { userSceneList } from '../api/equipment/scene';
import { updateEquipment } from '../api/equipment/equipment';
import { changeDisjunction } from "@/api/mqtt"
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import ECharts, { THEME_KEY } from 'vue-echarts'
import { use } from "echarts";
use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  MarkAreaComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
export default {
  name: "Index",
  components: {
    ECharts
  },
  data() {
    return {
      version: '0.24.3.25',
      topData: {
        electricNumber: 0,
        electricityNumber: 0,
        electricityAllMoney: 0,
        meterNumber: 0,
        waterNumber: 0,
        waterAllMoney: 0,
        getFlag: false
      },
      electricData: [
        {
          time: '0:00',
          value: 10
        }
      ],
      waterData: [
        {
          time: '0:00',
          value: 10
        }
      ],
      itemsData: [],
      electricityChart: null,
      waterChart: null,
    }
  },
  created() {
    window.addEventListener('resize', this.resizeHandler);
    //延迟获取数据
    setTimeout(() => {
      this.getAllData();
      resizeOb = new ResizeObserver((entries) => {
        for (entry of entries) {
          echarts.getInstanceByDom(entry.target).resize();
        }
      });
      resizeOb.observe(this.$refs.electricityChart);
    },500);
    //实时获取数据
    setInterval(() => {
      // 获取所有数据
      if(this.$route.path=='/index'){
        this.getAllData()
      }
    }, 2000)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler);
  },
  computed: {
    // 电分布
    option() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // prettier-ignore
          data: this.electricData.map(d => d.time)
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} W'
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: 'green'
            },
            {
              gt: 6,
              lte: 8,
              color: 'red'
            },
            {
              gt: 8,
              lte: 14,
              color: 'green'
            },
            {
              gt: 14,
              lte: 17,
              color: 'red'
            },
            {
              gt: 17,
              color: 'green'
            }
          ]
        },
        series: [
          {
            name: 'Electricity',
            type: 'line',
            smooth: true,
            // prettier-ignore
            data: this.electricData.map(d => d.value),
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
              data: [
                [
                  {
                    name: '高峰时段',
                    xAxis: '0:00'
                  },
                  {
                    xAxis: '0:15'
                  }
                ],
                [
                  {
                    name: '低谷时段',
                    xAxis: '0:15'
                  },
                  {
                    xAxis: '0:30'
                  }
                ]
              ]
            }
          }
        ]
      }
    },
    // 水分布
    optionWater() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // prettier-ignore
          data: this.electricData.map(d => d.time)
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} L'
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: 'green'
            },
            {
              gt: 6,
              lte: 8,
              color: 'red'
            },
            {
              gt: 8,
              lte: 14,
              color: 'green'
            },
            {
              gt: 14,
              lte: 17,
              color: 'red'
            },
            {
              gt: 17,
              color: 'green'
            }
          ]
        },
        series: [
          {
            name: 'Electricity',
            type: 'line',
            smooth: true,
            // prettier-ignore
            data: this.electricData.map(d => d.value),
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
              data: [
                [
                  {
                    name: '高峰时段',
                    xAxis: '0:00'
                  },
                  {
                    xAxis: '0:15'
                  }
                ],
                [
                  {
                    name: '低谷时段',
                    xAxis: '0:15'
                  },
                  {
                    xAxis: '0:30'
                  }
                ]
              ]
            }
          }
        ]
      }
    },
  },
  methods: {
    // 获取所有数据
    getAllData(){
    //   // 获取顶栏信息
    //   this.getTopData()
    //   // 获取当天用电数据
    //   this.getElectricData()
    //   // 获取当天用水数据
    //   this.getWaterData()
      // 获取场景数据
      this.getItemsData()
    },
    // 获取顶栏信息
    // getTopData(){
    //   getTop().then(res => {
    //     this.topData = res.data
    //     console.log(res.msg)
    //   })
    // },
    // // 获取当天用电数据
    // getElectricData(){
    //   getElectric().then(res => {
    //     this.electricData = rse.data
    //     console.log(res.msg)
    //   })
    // },
    // // 获取当天用水数据
    // getWaterData(){
    //   getWater().then(res => {
    //     this.waterData = res.data
    //     console.log(res.msg)
    //   })
    // },
    // 获取场景数据
    getItemsData(){
      userSceneList().then(res => {
        this.itemsData = res.data
        console.log(res.msg)
      })
    },
    handleSwitchChange(row){
      let text = row.disjunction == 0 ? "打开" : "关闭";
      this.$modal.confirm('确认要"' + text + '"名为"' + row.name + '"的设备吗？').then(function() {
        return changeDisjunction(row);
      }).then((res) => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function() {
        row.disjunction = row.disjunction == 0 ? 1 : 0;
      });
    },
    // 调整图表大小
    resizeHandler() {
      if (this.$refs.electricityChart && this.$refs.electricityChart.chart) {
        this.$refs.electricityChart.chart.resize();
        this.$refs.waterChart.chart.resize();
      }
      if (this.$refs.waterChart && this.$refs.waterChart.chart) {
        this.$refs.waterChart.chart.resize();
      }
    },
  },
}
</script>

<style lang='less' scoped>
*{
  margin: 0;
  padding: 0;
}
.layout{
  width: 100%;
  height: 100%;
  min-height: 1080px;
  display: flex;
  flex-direction: column;
  background: rgb(238,240,243);
}
.topBox{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  min-height: 100px;
  max-height: 150px;
  width: 100%;
  .insideBox{
    margin: 5px 15px;
    width: 50%;
    min-height: 100px;
    max-height: 140px;
    .insideBox2{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 5px;
      width: 100%;
      min-height: 80px;
      max-height: 110px;
      .insideText{
        font-weight: bold;
        font-size: 16px;
      }
      .insideNumber{
        font-size: 35px;
      }
    }
  }
}
.tableBox{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
  max-height: 650px;
  width: 100%;
  .insideBox{
    flex-direction: column;
    margin: 0 15px;
    width: 100%;
    min-width: 400px;
    min-height: 550px;
    max-height: 580px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    span{
      font-size: 20px;
      font-family: 	Wawati SC;
    }
    .electricityChart{
      width: 100%;
      height: 500px;
    }
    .waterChart{
      width: 100%;
      height: 500px;
    }
  }
}
.insideBox{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  // box-shadow: 1px 1px gray;
  border-radius: 3px;
}
ul::-webkit-scrollbar {
	display: none;
}
.allDataBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
  margin: 5px 20px;
  .dataBox{
    margin: 10px 15px;
    height: 350px;
    width: 22%;
    border-radius: 3px;
    background: rgb(255,255,255);
    .scene{
      padding: 15px;
      font-size: 30px;
      font-weight: bold;
      font-family: 	STKaiti;
      border-bottom: 1mm solid gray;
    }
    .equipments{
      height: 270px;
      width: 100%;
      overflow-y:scroll;
      .equipment{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        width: 100%;
        height: 70px;
        border-bottom: 1px solid gray;;
        .switch{
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .equipName{
          flex: 2;
          text-align: center;
          font-size: 24px;
          font-family: 	FangSong;
          font-weight: bold;
        }
        .equipValue{
          flex: 3;
          text-align: center;
          font-size: 22px;
          font-family: 	FangSong;
          div{
            margin: 5px;
            height: 25px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
